{% extends data.outerLayout %}
{% block title %}{{ __ns('apostrophe', "Reset My Password") }}{% endblock %}

{% block bodyClass %}apos-login-page apos-password-reset-page{% endblock %}

{% block main %}
  <div class="apos-login-wrapper">
    <div class="apos-login-content">
      <div class="apos-login-logo">{% block logo %}{% include "apostrophe-admin-bar:logo.html" %}{% endblock %}</div>
      <div class="apos-ui apos-login">
        <div class="apos-login-title apos-text-title">{% block subHeading %}{{ __ns('apostrophe', 'Reset Password') }}{% endblock %}</div>
        {% block form %}
          <form id="password-reset-form" action="{% block action %}{{ apos.prefix }}/password-reset{% endblock %}" method="post">
            {% if data.errors and data.errors.length %}
              <div class="apos-login-warning">
                {{ data.errors | join(' ') }}
              </div>
            {% endif %}
            {% block fields %}
              <div class="apos-field apos-login-password">
                <label class="apos-field-label" for="password">{{ __ns('apostrophe', 'New Password') }} {% block passwordHint %}{% endblock %}</label>
                <input class="apos-field-input apos-field-input-text" required type="password" name="password" id="password" />
              </div>
              <div class="apos-field apos-login-password2">
                <label class="apos-field-label" for="password2">{{ __ns('apostrophe', 'Confirm New Password') }} {% block passwordHint2 %}{% endblock %}</label>
                <input class="apos-field-input apos-field-input-text" required type="password" name="password2" id="password2" />
              </div>
            {% endblock %}
            <input type="hidden" name="reset" value="{{ data.reset }}" />
            <input type="hidden" name="email" value="{{ data.email }}" />
            <div class="apos-login-submit">
              <input type="submit" class="apos-button apos-button--major" value="{% block buttonLabel %}{{ __ns('apostrophe', 'Reset Password') }}{% endblock %}" />
            </div>
            <div class="apos-login-reset-cancel">
              <a href="{{ apos.prefix }}{{ data.loginUrl }}">{{ __ns('apostrophe', 'Cancel') }}</a>
            </div>
        </form>
        {% endblock %}
      </div>
    </div>
  </div>
{% endblock %}
